<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<uni-icons type="left" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="nav-title">信息修改</view>
				<view class="nav-right">
					<uni-icons type="ellipsis" size="24" color="#FFFFFF"></uni-icons>
				</view>
			</view>

			<!-- 占位区域 -->
			<view class="search-placeholder"></view>
		</view>

		<!-- 内容区域 -->
		<view class="content-view">
			<scroll-view class="content-scroll" scroll-y>
				<!-- 表单区域 -->
				<view class="form-container">
				<!-- 手机号输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<uni-icons type="smartphone" size="28" color="#999999" class="input-icon"></uni-icons>
						<input 
						class="input" 
						type="number" 
						placeholder="请输入手机号码" 
						placeholder-class="placeholder" 
						v-model="phoneNumber"
						maxlength="11"
					/>
						<view class="clear-btn" v-if="phoneNumber" @click="clearPhone">
							<uni-icons type="close" size="20" color="#CCCCCC"></uni-icons>
						</view>
					</view>
				</view>

				<!-- 验证码输入区域 -->
				<view class="verification-group">
					<view class="input-wrapper verification-input">
						<uni-icons type="locked" size="28" color="#999999" class="input-icon"></uni-icons>
						<input 
						class="input" 
						type="number" 
						placeholder="输入验证码" 
						placeholder-class="placeholder" 
						v-model="verificationCode"
						maxlength="6"
					/>
					</view>
					<button 
						class="send-btn" 
						:disabled="isCountingDown"
						@click="sendVerificationCode"
					>
						{{ isCountingDown ? `${countdown}s` : '获取验证码' }}
					</button>
				</view>

				<!-- 提交按钮 -->
				<view class="submit-section">
					<button class="submit-btn" @click="submitForm">提交</button>
				</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onUnmounted } from 'vue';
	const phoneNumber = ref('');
	const verificationCode = ref('');
	const isCountingDown = ref(false);
	const countdown = ref(60);
	let timer = null;
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
	
	// 清除手机号
	const clearPhone = () => {
		phoneNumber.value = '';
	};
	
	// 发送验证码
	const sendVerificationCode = () => {
		// 简单的手机号验证
		if (!phoneNumber.value || phoneNumber.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}
		
		// 开始倒计时
		startCountdown();
		
		// 这里可以添加发送验证码的API调用
		console.log('发送验证码到:', phoneNumber.value);
		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		});
	};
	
	// 开始倒计时
	const startCountdown = () => {
		isCountingDown.value = true;
		countdown.value = 60;
		
		timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				isCountingDown.value = false;
			}
		}, 1000);
	};
	
	// 提交表单
	const submitForm = () => {
		// 表单验证
		if (!phoneNumber.value || phoneNumber.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}
		
		if (!verificationCode.value || verificationCode.value.length !== 6) {
			uni.showToast({
				title: '请输入6位验证码',
				icon: 'none'
			});
			return;
		}
		
		// 这里可以添加提交表单的API调用
		console.log('提交信息:', {
			phoneNumber: phoneNumber.value,
			verificationCode: verificationCode.value
		});
		
		uni.showToast({
			title: '信息修改成功',
			icon: 'success'
		});
		
		// 延迟返回个人信息页面
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/my/personalInformation/personalInformation'
			});
		}, 1500);
	};
	
	// 组件卸载时清除定时器
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer);
		}
	});
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
		overflow: hidden;
	}

	/* 顶部导航栏 */
	.nav-header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
		position: relative;
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		pointer-events: none;
	}

	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	/* 占位区域 */
	.search-placeholder {
		height: 250rpx;
	}

	/* 内容视图 */
	.content-view {
		flex: 1;
		padding: 0 30rpx 20rpx 30rpx;
		margin-top: -250rpx;
		height: 0;
		overflow: visible;
		display: flex;
		flex-direction: column;
	}

	.content-scroll {
		flex: 1;
		height: 0;
		width: 100%;
	}

	/* 表单容器 */
	.form-container {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	/* 输入组样式 */
	.input-group {
		margin-bottom: 30rpx;
	}
	
	/* 输入框包装器 */
	.input-wrapper {
		display: flex;
		align-items: center;
		background-color: #F9F9F9;
		border-radius: 8rpx;
		padding: 0 20rpx;
		height: 90rpx;
	}
	
	/* 输入框图标 */
	.input-icon {
		margin-right: 15rpx;
	}
	
	/* 输入框 */
	.input {
		flex: 1;
		height: 100%;
		font-size: 32rpx;
		color: #333333;
	}
	
	/* 占位符样式 */
	.placeholder {
		color: #CCCCCC;
	}
	
	/* 清除按钮 */
	.clear-btn {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 验证码组样式 */
	.verification-group {
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
	}
	
	/* 验证码输入框 */
	.verification-input {
		flex: 1;
		margin-right: 20rpx;
	}
	
	/* 发送验证码按钮 */
	.send-btn {
		min-width: 180rpx;
		height: 90rpx;
		background-color: #1E88E5;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 8rpx;
		line-height: 90rpx;
	}
	
	.send-btn[disabled] {
		background-color: #CCCCCC;
	}
	
	/* 提交区域 */
	.submit-section {
		display: flex;
		justify-content: center;
	}
	
	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		height: 90rpx;
		background-color: #1E88E5;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 45rpx;
		line-height: 90rpx;
	}
	
	/* 去除uni-app默认按钮样式 */
	button {
		border: none;
		background: none;
	}
	
	button::after {
		border: none;
	}
</style>
